<script setup>
import {ref, inject} from 'vue'
import axios from 'axios'
import Vue3TagsInput from "@/components/Vue3TagsInput/Vue3TagsInput.vue"
import {ElMessageBox, ElTooltip, ElNotification} from "element-plus"

import RegisterTalent from './components/RegisterTalent.vue'
import UpdateTalent from './components/UpdateTalent.vue'
import AuditTalent from './components/AuditTalent.vue'

const userinfo=inject("userinfo")

//从userinfo中提取擅长领域，用于vue3-tags-input控件显示
var fields=[]
if(userinfo.value.talent!=null){
    userinfo.value.talent.level2s.map(level2=>{
        fields.push(level2.name)
    })
}

//查找审核表中是否有曾提交过的修改申请
const talent_audit=ref()
axios.get(
    `/api/talent_audit/${userinfo.value.id}`
).then(res=>{
    switch(res.status)
    {
        case 204: //审核表中无记录
            break;
        case 200: //审核表中存在记录
            talent_audit.value=res.data
            var time=new Date(res.data.create_at)
            time=time.toLocaleString()
            ElNotification({
                title:"专家信息审核中",
                message:`上次提交时间：${time}`,
                type:'warning'
            })
            break;
    }
}).catch(err=>{
    alert("服务器内部错误")
    console.log(err)
})

//注册专家页
const model_register_talent=ref(false)
function handleButtonRegister(){
    if(talent_audit.value!=null){
        ElMessageBox.confirm(
            '上次提交信息仍在审核中，是否重新填写？',
            '警告',
            {
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }
        ).then(()=>{
            model_register_talent.value=true
        }).catch(()=>{})
    }else{
        model_register_talent.value=true
    }
}
//修改专家页
const model_update_talent=ref(false)
function handleButtonModify(){
    if(talent_audit.value!=null){
        ElMessageBox.confirm(
            '上次提交信息仍在审核中，是否重新填写？',
            '警告',
            {
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }
        ).then(()=>{
            model_update_talent.value=true
        }).catch(()=>{})
    }else{
        model_update_talent.value=true
    }
}
//浏览审核中的专家信息
const model_talent_audit=ref(false)

</script>

<template>
<el-tooltip
    v-if="talent_audit"
    placement="left"
    effect="light"
    content="审核中，点击查看"
>
    <el-image src="/img/audit.png" style="position:absolute; right:10px; top:10px; cursor:pointer;" @click="model_talent_audit=true"></el-image>
</el-tooltip>
<div v-if="model_talent_audit">
    <AuditTalent
        v-if="model_talent_audit"
        v-model="model_talent_audit"
        v-model:talent_audit="talent_audit"
    />
</div>

<RegisterTalent v-if="model_register_talent" v-model="model_register_talent" v-model:talent_audit="talent_audit"/>
<UpdateTalent v-if="model_update_talent" v-model="model_update_talent" v-model:talent_audit="talent_audit"/>
<div v-if="userinfo.talent">
    <div style="display:flex; flex-direction:column;">
        <div class="abstract">
            <div style="display:flex; flex-direction:column;"> 
                <el-image style="width:100px; height:130px;" :src="'/minio/talent-avatar/'+userinfo.talent.photo" fit="fill">
                    <template #error>
                        <div class="avatar"></div>
                    </template>
                </el-image>
            </div>
            <div style="display:flex; flex-direction:column; margin-left:10px; width:100%; justify-content:space-between;">
                <div style="display:flex;">
                    <div class="title">姓名</div>
                    <div class="contnet">{{userinfo.name}}</div>
                </div>
                <div style="display:flex;">
                    <div class="title">手机号</div>
                    <div class="contnet">{{userinfo.mobile}}</div>
                </div>
                <div style="display:flex;">
                    <div class="title">邮箱</div>
                    <div class="contnet"><a :href="'mailto:'+userinfo.email">{{userinfo.email}}</a></div>
                </div>
                <div style="display:flex;">
                    <div class="title">头衔</div>
                    <div class="contnet">
                        <vue3-tags-input
                            :tags="userinfo.talent.titles"
                            read-only
                            class="tags-readonly"
                        />
                    </div>
                </div>
                <div style="display:flex;">
                    <div class="title">擅长领域</div>
                    <div class="contnet">
                        <vue3-tags-input
                            :tags="fields"
                            read-only
                            class="tags-readonly"
                        />
                    </div>
                </div>
            </div>
        </div>
        <hr style="margin-top:20px;"/>
        <div style="margin-top:10px; display:flex; flex-direction:column;align-items: center;">
            <span style="font-weight:bolder;">成果简介</span>
            <span style="width:90%;">{{ userinfo.talent.achievements }}</span>
        </div>
        <div class=operations>
            <el-button @click=handleButtonModify>修改</el-button>
        </div>
    </div>
</div>
<div v-else>
    <div style="display:flex; justify-content: center; margin:20px 0;">
        <el-button type="success" @click="handleButtonRegister">申请开通专家页</el-button>
    </div>
</div>
</template>

<style lang="scss" scoped>
.abstract{
    display:flex;
}
@media screen and (max-width: 500px){
    .abstract{
        display:flex;
        flex-direction:column;
        align-items: center;
    }
}

.avatar{
    width:100px;
    height:130px;
    background:url('data:image/svg+xml;utf8,%3C%73%76%67%20%76%69%65%77%42%6F%78%3D%22%30%20%30%20%31%30%32%34%20%31%30%32%34%22%20%76%65%72%73%69%6F%6E%3D%22%31%2E%31%22%20%78%6D%6C%6E%73%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%77%33%2E%6F%72%67%2F%32%30%30%30%2F%73%76%67%22%20%70%2D%69%64%3D%22%34%37%33%35%22%20%77%69%64%74%68%3D%22%31%30%30%22%20%68%65%69%67%68%74%3D%22%31%30%30%22%3E%3C%70%61%74%68%20%64%3D%22%4D%39%33%38%2E%35%35%37%34%34%20%37%39%36%2E%38%36%36%35%36%6C%2D%32%32%35%2E%39%39%36%38%2D%38%38%2E%30%37%34%32%34%63%30%20%30%2D%34%33%2E%31%30%30%31%36%2D%31%36%2E%37%33%32%31%36%2D%35%39%2E%38%34%32%35%36%2D%33%33%2E%31%38%37%38%34%2D%31%30%2E%37%36%32%32%34%2D%31%30%2E%35%37%37%39%32%2D%39%2E%39%38%34%2D%33%35%2E%35%33%32%38%2D%30%2E%34%36%30%38%2D%36%37%2E%34%30%39%39%32%73%31%32%35%2E%33%37%38%35%36%2D%31%36%31%2E%34%32%33%33%36%20%31%32%35%2E%33%37%38%35%36%2D%32%37%39%2E%31%30%31%34%34%43%37%37%37%2E%36%33%35%38%34%20%31%34%37%2E%33%35%33%36%20%36%35%38%2E%31%35%35%35%32%20%30%20%35%31%30%2E%37%38%31%34%34%20%30%20%33%36%33%2E%34%31%37%36%20%30%20%32%34%33%2E%39%34%37%35%32%20%31%34%37%2E%33%35%33%36%20%32%34%33%2E%39%34%37%35%32%20%33%32%39%2E%31%30%33%33%36%63%30%20%31%31%32%2E%37%31%31%36%38%20%31%30%33%2E%32%33%39%36%38%20%32%34%37%2E%30%38%30%39%36%20%31%31%35%2E%39%37%38%32%34%20%32%37%31%2E%35%30%33%33%36%20%31%32%2E%37%34%38%38%20%32%34%2E%34%32%32%34%20%39%2E%36%34%36%30%38%20%36%31%2E%36%34%34%38%2D%30%2E%34%31%39%38%34%20%37%32%2E%39%31%39%30%34%2D%31%35%2E%31%31%34%32%34%20%31%36%2E%39%33%36%39%36%2D%37%30%2E%33%33%38%35%36%20%33%33%2E%39%31%34%38%38%2D%37%30%2E%33%33%38%35%36%20%33%33%2E%39%31%34%38%38%4C%38%35%2E%34%33%32%33%32%20%37%39%38%2E%32%33%38%37%32%63%2D%34%37%2E%35%39%35%35%32%20%31%37%2E%31%30%30%38%2D%38%34%2E%38%38%39%36%20%36%31%2E%39%39%32%39%36%2D%38%34%2E%38%38%39%36%20%31%31%32%2E%36%34%6C%30%20%32%34%2E%30%32%33%30%34%63%30%20%35%35%2E%32%37%35%35%32%20%34%34%2E%38%39%32%31%36%20%38%39%2E%30%39%38%32%34%20%31%30%30%2E%30%36%35%32%38%20%38%39%2E%30%39%38%32%34%6C%33%34%31%2E%37%30%38%38%20%30%20%31%31%37%2E%31%32%35%31%32%20%30%20%33%36%33%2E%39%33%39%38%34%20%30%63%35%35%2E%31%38%33%33%36%20%30%20%31%30%30%2E%30%37%35%35%32%2D%33%33%2E%38%32%32%37%32%20%31%30%30%2E%30%37%35%35%32%2D%38%39%2E%30%39%38%32%34%6C%30%2D%32%34%2E%30%32%33%30%34%43%31%30%32%33%2E%34%35%37%32%38%20%38%36%30%2E%32%32%31%34%34%20%39%38%36%2E%31%36%33%32%20%38%31%33%2E%39%35%37%31%32%20%39%33%38%2E%35%35%37%34%34%20%37%39%36%2E%38%36%36%35%36%4C%39%33%38%2E%35%35%37%34%34%20%37%39%36%2E%38%36%36%35%36%7A%4D%39%33%38%2E%35%35%37%34%34%20%37%39%36%2E%38%36%36%35%36%22%20%66%69%6C%6C%3D%22%23%32%37%32%36%33%36%22%20%70%2D%69%64%3D%22%34%37%33%36%22%20%64%61%74%61%2D%73%70%6D%2D%61%6E%63%68%6F%72%2D%69%64%3D%22%61%33%31%33%78%2E%73%65%61%72%63%68%5F%69%6E%64%65%78%2E%30%2E%69%35%2E%34%62%30%35%33%61%38%31%5A%70%51%4A%5A%69%22%20%63%6C%61%73%73%3D%22%73%65%6C%65%63%74%65%64%22%3E%3C%2F%70%61%74%68%3E%3C%2F%73%76%67%3E') no-repeat center;
}
.avatar-edit{
    margin-top:-20px;
    background:gray;
    opacity:0.8;
    width:100px;
    text-align:center;
    color:white;
    font-size:small;
    cursor:pointer;
}
.title{
    width:70px;
    font-size:medium;
    font-weight:bolder;
    text-align: justify;
    text-align-last:justify;
}
.contnet{
    margin-left:20px;
    font-size:medium;
    flex-grow:1;
    width:0;
    word-wrap:break-word;
}
.tags-readonly{
    max-width:300px;
    min-height:0px;
    border:0px;
    :deep(.v3ti-new-tag){
        display:none;
    }
}
.tags-editable{
    max-width:300px; 
    min-height:100px;
    :deep(.v3ti-new-tag){
        min-width:180px;
    };
    :deep(.v3ti-tag){
        background-color:var(--el-color-warning);
    };
}
.modify-achievement{
    width:90%;
    :deep(.el-textarea__inner){
        color:var(--el-color-warning)!important;
    }
}
    
.operations{
    padding-top:10px;
    padding-bottom:10px;
    margin-top:20px;
    width:100%;
    text-align: center;
    background-color:var(--el-color-info-light-9);
}
</style>